/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../../bower_components/bootstrap/less/mixins.less";
@import '../../styles/themes/cdap/mixins.less';

body.theme-cdap {
  &.state-admin {
    header.navbar {
      // Hide the namespace dropdown in Admin
      .navbar-collapse > ul.navbar-nav:first-child {
        display: none;
      }
    }
    main.container {
      margin-top: 140px;
      .search-bar { margin-bottom: 15px; }
      .clickable { cursor: pointer; }
      .sidebar {
        ul {
          > li {
            &:first-child {
              .border-radius(8px 8px 0 0);
              border-bottom: 0;
            }
            &:last-of-type {
              .border-radius(0 0 8px 8px);
              > ul {
                .border-radius(0 0 8px 8px);
                max-height: 500px;
                overflow-y: auto;

                > li:last-of-type ul {
                  .border-radius(0 0 8px 8px);
                }
              }
            }
            &.current { color: @cdap-orange; }
            > ul { // Management child menu (secondary)
              background-color: @cdap-darkness;
              > li {
                &:not(:last-child) {
                  border-bottom: 2px solid transparent;
                  .box-shadow(inset 0 -1px 0 0 fade(black, 20%));
                }
                a {
                  color: white;
                  &.current { color: @cdap-orange; }
                  span { color: white; }
                }
                ul { // Namespace child menu (tertiary)
                  background-color: @tertiary-menu-bg;
                  @shadow: 0 1px 4px black, 0 -1px 0px black;
                  .box-shadow(@shadow);
                  li {
                    &:not(:last-child) { border-bottom: 1px solid fade(@child-menu-link-color, 30%); }
                    a { text-indent: 15px; }
                  }
                }
              }
            }
          }
          li {
            padding: 0;
            a {
              color: @primary-menu-link-color;
              font-size: 14px;
              font-weight: 500;
              padding: 15px;
              &:hover, &:focus { text-decoration: none; }
              &.abstract {
                &.current {
                  border-left: 4px solid @cdap-orange;
                  color: @cdap-orange;
                }
                // Create namespace "+"
                + a {
                  border-left: 1px solid @body-bg;
                  color: @cdap-orange;
                  font-size: 16px;
                }
              }
            }
            &.current a {
              cursor: default;
              text-decoration: none;
            }
          }
        }
      }
      [datasets-list] {
        table {
          tr{
            td {
              [class*="icon-"] {
                vertical-align: middle;
              }
            }
          }
        }
      }
      h2:first-child { margin-top: 0; }
      .panel-default { margin-top: 18px; }
      // All list templates using circular status icons will rely on this selector
      td > span[class^="status-"] {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 5px;
        .border-radius(25px);
      }
      td > span {
        &.status-green { background-color: @brand-success; }
        &.status-grey { background-color: @cdap-gray; }
      }
      input.pref-key { font-weight: bold; }

      .namespace-table {
        td {
          max-width: 300px;
          div {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      div.select-wrapper {
        .select-wrapper();
      }
    }
  }
  &.state-admin-system-configuration {
    main.container {
      .table {
        table-layout: fixed;
        td {
          word-wrap: break-word;
        }
      }
    }
  }
  &.state-admin-namespace-detail-data-streammetadata {
    .form-horizontal {

      padding-left: 15px;
      padding-right: 15px;

      .null {
        line-height: 25px;

        input {
          vertical-align: middle;
        }
      }

      .avro {
        resize: vertical;
        min-height: 250px;
      }

      .form-group {
        margin-left: 0;
        margin-right: 0;

        .fields {
          top: -15px;
          position: relative;
        }

        .field-row {
          margin-bottom: 5px;
        }
      }

      .well {
        margin-left: 15px;
      }
    }
  }
  &.state-admin-namespace-detail-settings {
    textarea {
      min-height: 100px;
      resize: none;
    }
  }
  &.state-admin-namespace-detail-apps {
    main.container {
      .btn-group.open button.dropdown-toggle {
        .box-shadow(none);
      }
      .table-responsive {
        @media (max-width: @screen-sm-max) {
          border: 0;
        }
      }
    }
  }
  &.state-admin-system-services-detail {
    main.container {
      // This is required to steal the focus from an already clicked button on previous state.
      .btn-default.active, .btn.btn-default:focus {
        background-color: white;
        border-color: #dfe2e9;
      }
    }
  }
  &.state-admin-namespace-detail-templateedit {
    .table {
      margin-top: 0;
      th, td {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      > thead > tr > th {
        border: 1px solid @table-border-color;
        &:hover, &:focus {
          cursor: default;
        }
        label {
          margin-bottom: 0;
        }
      }
      td {
        font-size: 13px;
        height: 36px;
        padding: 0 10px;
        vertical-align: middle;
        border: 1px solid #ddd;
        border-collapse: collapse;
        &.name {
          width: 35%;
        }
        &.type {
          width: 30%;
        }
        &.nullable {
          width: 20%;
        }
        &.trash {
          width: 15%;
          a {
            padding-left: 0;
            padding-right: 0;
          }
          .btn:active {
            .box-shadow(none);
          }
        }
      }
      .fa-trash {
        color: @brand-danger;
        font-size: 15px;
      }
      div.select-wrapper {
        background-color: transparent;
      }
      input[type="text"], select.form-control {
        border: 0;
      }
      input[type="text"] {
        background-color: transparent;
      }
      .control-label {
        font-weight: 400;
      }
      .form-control {
        color: #666;
        height: 30px;
        padding: 0;
        .box-shadow(none);
        .placeholder-color(@color: #666, @font-weight: 400);
        &:focus {
          border-color: @table-border-color;
          .box-shadow(none);
        }
      }
    }
  }
}
